<template>
	<div class="mt-list">
		<mu-container>
			<mu-card class="input-text">
				<mu-auto-complete
					:data="searchName"
					v-model="text"
					placeholder="检索数据表名称"
				>
					<template #append v-if="text.length > 0">
						<span class="clear-text" @click="text = ''">✖</span>
					</template>
				</mu-auto-complete>
			</mu-card></mu-container
		>

		<div class="card-divide"></div>

		<mu-container>
			<mu-card>
				<mu-card-title title="所有数据列表"></mu-card-title>
				<mu-divider></mu-divider>
				<mu-list>
					<mu-list-item
						button
						v-for="item in searchResult"
						:key="item.data + '::' + item.title"
						:to="{ name: 'home', query: { index: item.$index } }"
					>
						<mu-list-item-action>
							<mu-badge
								circle
								color="blue"
								:content="String(item.$index + 1)"
							></mu-badge>
						</mu-list-item-action>
						<mu-list-item-title>{{ item.title }}</mu-list-item-title>
						<mu-list-item-action>
							<mu-list-item-after-text
								>{{
									$store.state.data[item.$index]
										? $store.state.data[item.$index].length - 1
										: "??"
								}}
								项</mu-list-item-after-text
							>
						</mu-list-item-action>
					</mu-list-item>
				</mu-list></mu-card
			>
		</mu-container>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";
import { getCurrentConfig } from "../utils/hooks";

export default defineComponent({
	name: "mt-list",
	setup(props, ctx) {
		const text = ref("");
		const { config } = getCurrentConfig(ctx);
		const searchName = computed(() => config.value.map((item) => item.title));
		const searchResult = computed(() =>
			config.value
				.map((item, index) => ({ ...item, $index: index }))
				.filter((item) => item.title.startsWith(text.value))
		);

		document.title = ctx.root.$store.state.globalConfig.title;

		return {
			text,
			searchName,
			searchResult,
		};
	},
});
</script>

<style>
.mt-list {
	padding-top: 99px;
}

.mt-list .mu-card {
	width: 65%;
	max-height: 450px;
	overflow-x: auto;
}
.mu-item-action {
	min-width: 40px;
}
@media screen and (max-width: 1200px) {
	.mt-list.mu-card {
		width: 80%;
	}
}
@media screen and (max-width: 768px) {
	.mt-list .mu-card {
		width: 95%;
	}
}

@media screen and (max-width: 768px) {
	.mt-list {
		padding-top: 90px;
	}
}
.mt-list .card-divide {
	padding: 15px;
}

.mt-list .clear-text {
	cursor: pointer;
}

.mt-list .input-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 15px;
}
.mt-list .input-text .mu-input {
	width: 85%;
}
.mt-list .container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mt-list .container .mu-item-action {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
}

.mt-list .container .mu-item-action .mu-avatar {
	margin-left: 5px;
}
.mt-list .mu-card-actions {
	display: flex;
	justify-content: space-around;
}
</style>
